pageIndicators: Redesign and add position-based animation

Remove setCurrentPage() function, introduce setCurrentPosition() instead,
which allows to have fractional positions.

Make inactive dots smaller, filled and partially transparent, as opposed to
larger and fully opaque active dot. Make dots smaller overall, remove
borders. Interpolate each dot between active and inactive state based on
scroll position.

Make it impossible to "uncheck" the active dot.

Thanks Florian Müllner for parts of the code.

Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/1932

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/843

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index b60083011577c8ef51f455a2c8e2f03080ad3cb4..ea20b1e644dfee02a7bfa5ed3dd4d0e06be216eb 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1549,20 +1549,14 @@ StScrollBar {
   }
 
   .page-indicator {
-    padding: 15px 20px;
+    padding: 7px 16px;
 
     .page-indicator-icon {
       width: 12px;
       height: 12px;
-      background-color: transparent;
-      border: 2px solid rgba(255, 255, 255, 0.4);
-      border-radius: 12px;
+      background-color: white;
+      border-radius: 6px;
     }
-
-    &:hover .page-indicator-icon { border-color: white; }
-    &:active .page-indicator-icon { border: none; margin: 2px; background-color: white; }
-    &:checked .page-indicator-icon,
-    &:checked:active .page-indicator-icon { background-color: white;}
   }
 
   .no-frequent-applications-label { @extend %status_text; }
@@ -1762,8 +1756,8 @@ StScrollBar {
         padding: 4px 4px;
 
         .page-indicator-icon {
-            width: 6px;
-            height: 6px
+            width: 8px;
+            height: 8px;
         }
     }
 }

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 929caa12bd49308102c897174aedb6328b62c535..f78a2c03d1c8961389d98aeb98ef00f64c7cbab3 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -315,6 +315,9 @@ var AllView = GObject.registerClass({
         this._scrollView.set_policy(St.PolicyType.NEVER,
                                     St.PolicyType.EXTERNAL);
         this._adjustment = this._scrollView.vscroll.adjustment;
+        this._adjustment.connect('notify::value', adj => {
+            this._pageIndicators.setCurrentPosition(adj.value / adj.page_size);
+        });
 
         this._pageIndicators = new PageIndicators.AnimatedPageIndicators();
         this._pageIndicators.connect('page-activated',
@@ -561,7 +564,7 @@ var AllView = GObject.registerClass({
 
         if (!this.mapped) {
             this._adjustment.value = this._grid.getPageY(pageNumber);
-            this._pageIndicators.setCurrentPage(pageNumber);
+            this._pageIndicators.setCurrentPosition(pageNumber);
             this._grid.currentPage = pageNumber;
             return;
         }
@@ -597,8 +600,6 @@ var AllView = GObject.registerClass({
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             duration: time,
         });
-
-        this._pageIndicators.setCurrentPage(pageNumber);
     }
 
     _diffToPage(pageNumber) {
@@ -754,7 +755,7 @@ var AllView = GObject.registerClass({
                 this._adjustment.value = 0;
                 this._grid.currentPage = 0;
                 this._pageIndicators.setNPages(this._grid.nPages());
-                this._pageIndicators.setCurrentPage(0);
+                this._pageIndicators.setCurrentPosition(0);
                 return GLib.SOURCE_REMOVE;
             });
         }

diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index c6984cc36d0baf710837fa2232e4056d894c92d4..4d153bbf2789457d5a3b5f1bbae86538df7b3060 100644 (file)
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -920,9 +920,14 @@ var EmojiSelection = GObject.registerClass({
         this.add_child(this._pageIndicator);
         this._pageIndicator.setReactive(false);
 
+        this._emojiPager.connect('notify::delta', () => {
+            this._updateIndicatorPosition();
+        });
+
         let bottomRow = this._createBottomRow();
         this.add_child(bottomRow);
 
+        this._curPage = 0;
         this._emojiPager.setCurrentPage(0);
     }
 
@@ -937,8 +942,9 @@ var EmojiSelection = GObject.registerClass({
     }
 
     _onPageChanged(sectionLabel, page, nPages) {
+        this._curPage = page;
         this._pageIndicator.setNPages(nPages);
-        this._pageIndicator.setCurrentPage(page);
+        this._updateIndicatorPosition();
 
         for (let i = 0; i < this._sections.length; i++) {
             let sect = this._sections[i];
@@ -946,6 +952,11 @@ var EmojiSelection = GObject.registerClass({
         }
     }
 
+    _updateIndicatorPosition() {
+        this._pageIndicator.setCurrentPosition(this._curPage -
+            this._emojiPager.delta / this._emojiPager.width);
+    }
+
     _findSection(emoji) {
         for (let i = 0; i < this._sections.length; i++) {
             if (this._sections[i].first == emoji)

diff --git a/js/ui/pageIndicators.js b/js/ui/pageIndicators.js
index 825aafcf74fdbb21ba4f7208bf1799e54079d5ce..09186ed2c10c9e8cd0fdb854dcf0103392e0cd7e 100644 (file)
--- a/js/ui/pageIndicators.js
+++ b/js/ui/pageIndicators.js
@@ -1,10 +1,15 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported PageIndicators, AnimatedPageIndicators */
 
-const { Clutter, GLib, GObject, Meta, St } = imports.gi;
+const { Clutter, GLib, Graphene, GObject, Meta, St } = imports.gi;
 
 const { ANIMATION_TIME_OUT, ANIMATION_MAX_DELAY_OUT_FOR_ITEM, AnimationDirection } = imports.ui.iconGrid;
 
+const INDICATOR_INACTIVE_OPACITY = 128;
+const INDICATOR_INACTIVE_OPACITY_HOVER = 255;
+const INDICATOR_INACTIVE_SCALE = 2 / 3;
+const INDICATOR_INACTIVE_SCALE_PRESSED = 0.5;
+
 var INDICATORS_BASE_TIME = 250;
 var INDICATORS_BASE_TIME_OUT = 125;
 var INDICATORS_ANIMATION_DELAY = 125;
@@ -32,7 +37,7 @@ var PageIndicators = GObject.registerClass({
             clip_to_allocation: true,
         });
         this._nPages = 0;
-        this._currentPage = undefined;
+        this._currentPosition = 0;
         this._reactive = true;
         this._reactive = true;
     }
@@ -66,13 +71,21 @@ var PageIndicators = GObject.registerClass({
                                                 button_mask: St.ButtonMask.ONE |
                                                              St.ButtonMask.TWO |
                                                              St.ButtonMask.THREE,
-                                                toggle_mode: true,
-                                                reactive: this._reactive,
-                                                checked: pageIndex == this._currentPage });
-                indicator.child = new St.Widget({ style_class: 'page-indicator-icon' });
+                                                reactive: this._reactive });
+                indicator.child = new St.Widget({
+                    style_class: 'page-indicator-icon',
+                    pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }),
+                });
                 indicator.connect('clicked', () => {
                     this.emit('page-activated', pageIndex);
                 });
+                indicator.connect('notify::hover', () => {
+                    this._updateIndicator(indicator, pageIndex);
+                });
+                indicator.connect('notify::pressed', () => {
+                    this._updateIndicator(indicator, pageIndex);
+                });
+                this._updateIndicator(indicator, pageIndex);
                 this.add_actor(indicator);
             }
         } else {
@@ -84,12 +97,28 @@ var PageIndicators = GObject.registerClass({
         this.visible = this._nPages > 1;
     }
 
-    setCurrentPage(currentPage) {
-        this._currentPage = currentPage;
+    _updateIndicator(indicator, pageIndex) {
+        let progress =
+            Math.max(1 - Math.abs(this._currentPosition - pageIndex), 0);
+
+        let inactiveScale = indicator.pressed
+            ? INDICATOR_INACTIVE_SCALE_PRESSED : INDICATOR_INACTIVE_SCALE;
+        let inactiveOpacity = indicator.hover
+            ? INDICATOR_INACTIVE_OPACITY_HOVER : INDICATOR_INACTIVE_OPACITY;
+
+        let scale = inactiveScale + (1 - inactiveScale) * progress;
+        let opacity = inactiveOpacity + (255 - inactiveOpacity) * progress;
+
+        indicator.child.set_scale(scale, scale);
+        indicator.child.opacity = opacity;
+    }
+
+    setCurrentPosition(currentPosition) {
+        this._currentPosition = currentPosition;
 
         let children = this.get_children();
         for (let i = 0; i < children.length; i++)
-            children[i].set_checked(i == this._currentPage);
+            this._updateIndicator(children[i], i);
     }
 });